<template>
  <div class="flex width1200 margin-center mgt-20 mgb-20">
    <div class="flex-left">
      <div class="breadcrumb flex-center">
        <p class="title">道德与法治/课程详情</p>
      </div>
      <div class="video">
        <video width="600" height="377" controls>
          <source src="https://v-cdn.zjol.com.cn/276984.mp4" type="video/mp4" />
          您的浏览器不支持 HTML5 video 标签。
        </video>
        <div class="pdt-50 mgb-10">
          <span class="btn" @click="centerDialogVisible = true">纠错反馈</span>
        </div>
        <p class="f12 color-666">
          若下载资源与本课程不匹配或下载资源过程中出现为或课程内容有错误，可点击上方按钮进行错误反馈
        </p>
      </div>
    </div>
    <div class="flex-right">
      <div class="flex-between">
        <p class="f16 bold">{{ list.title }}</p>
        <p>
          <el-image
            class="icon"
            v-if="!list.praise"
            :src="praise_icon1"
            fit="cover"
          ></el-image>
          <el-image
            class="icon"
            v-if="list.praise"
            :src="praise_icon2"
            fit="cover"
          ></el-image>
        </p>
      </div>
      <div class="flex-between mgt-5 mgb-15">
        <p class="f12">{{ list.num }}人学过</p>
        <p class="f12">{{ list.praiseNum }}已赞</p>
      </div>
      <div class='mgb-15'>
        <i class="tag" v-if="list.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in list.tag.split(",")'>{{tag}}</i>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课程&资料" name="first" class="course">
          <div class="flex mgb-20" v-for='(i,index) in courseList' :key='index' >
             <el-image class="cover mgr-20" v-if="i.type==1" :src="courseType_icon1" fit="cover"></el-image>
             <el-image class="cover mgr-20" v-if="i.type==2" :src="courseType_icon2" fit="cover"></el-image>
             <el-image class="cover mgr-20" v-if="i.type==3" :src="courseType_icon3" fit="cover"></el-image>
             <el-image class="cover mgr-20" v-if="i.type==4" :src="courseType_icon4" fit="cover"></el-image>
             <div class="flex-between-center flex1">
               <div>
                 <p class="line1">{{i.name}}</p>
                 <p class="f12" v-if="i.progress!='0'">进度：{{i.progress}}</p>
               </div>
               <div class="flex">
                 <div class="btn" v-if="i.type==1">重看</div>
                 <div class="btn" v-if="i.type==2">继续</div>
                 <div class="btn" v-if="i.type==3">播放</div>
                 <div class="btn" v-if="i.type==4">下载</div>
                 <div class="btn" v-if="i.type==4">预览</div>
               </div>
             </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评价" name="second" class="comment">
          <div class="flex-center mgb-20">
            <el-image class="head mgr-10" :src="headImg" fit="cover"></el-image>
            <input class="input flex1" placeholder="观看完视频啦!快来评价吧~
" type="text">
            <button  class="submit">评价</button>
          </div>
          <div v-for='(i,index) in commentList' :key='index' class="flex">
            <el-image class="head mgr-10 mgb-20" :src="i.headImg" fit="cover"></el-image>
            <div class="flex1 flex flex-column">
              <div class="flex-between-center"> 
                <p class="f12 line1">{{i.name}}</p>
                <p class="f12">{{i.date}}</p>
              </div>
              <p>{{i.content}}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="相关资料" name="third" class="datum">
          <div class="flex mgb-20 relative" v-for='(i,index) in tableDate' :key='index' >
            <el-image class="cover" :src="i.img" fit="cover"></el-image>
            <i class="read">{{i.num}}人学过</i>
             <div class="pdl-20 pdr-20 pdt-9 pdb-9 flex1">
               <p class="line1 bold mgb-5">{{i.title}}</p>
               <div class="flex" style="flex-wrap: wrap;">
                <i class="tag mgb-5" v-if="i.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in i.tag.split(",")'>{{tag}}</i>
               </div>
             </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 纠错反馈 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="600"
      center>
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="反馈详情" prop="">
          <el-input type="textarea" placeholder="请尽量详细描述您遇到的问题
" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="活动形式" prop="">
        <!--  :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove" -->
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            tip="(支持png.jpg格式，图片大小不超过5M),最多上传9张"
           
            >
            <i class="el-icon-plus"></i>
          </el-upload>
         </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <button class="feedback_btn" @click="centerDialogVisible = false">提交</button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      centerDialogVisible: true,
      headImg:require("../assets/img/图层 10 拷贝@2x.png"),
      list: {
        img: require("../assets/img/图层 14@2x.png"),
        title: "开心心上学去(基础版)",
        tag: "基础班,—年级上册,第一单元",
        teacher: "李晓东",
        num: "66",
        collection: true,
        download: false,
        praise:true,
        praiseNum:'599'
      },
      praise_icon1: require("../assets/img/点赞@2x.png"),
      praise_icon2: require("../assets/img/图层 1326@2x.png"),
      activeName: 'second',
      courseList:[
        {
          name:"教学开开心心上学去（上）",
          progress:'30%',
          state:1,
          type:1,
        },
         {
          name:"教学开开心心上学去（上）",
          progress:'30%',
          state:2,
          type:2,
        },
         {
          name:"教学开开心心上学去（上）",
          progress:'0',
          state:4,
          type:3,
        },{
          name:"教学开开心心上学去（上）",
          progress:'99%',
          state:3,
          type:4,
        },
      ],
      courseType_icon1:require("../assets/img/教学 设计@2x.png"),
      courseType_icon2:require("../assets/img/课件@2x.png"),
      courseType_icon3:require("../assets/img/说课@2x(1).png"),
      courseType_icon4:require("../assets/img/说课@2x.png"),
      commentList:[
        {
          headImg:require("../assets/img/图层 678@2x.png"),
          name:'李焕英',
          date:'2021-02-27',
          content:'很实用的一款课程',
        },{
          headImg:require("../assets/img/图层 683@2x.png"),
          name:'李三思',
          date:'2021-02-27',
          content:'每天进步一点点',
        },{
          headImg:require("../assets/img/图层 688@2x.png"),
          name:'张甜',
          date:'2021-02-27',
          content:'课程很好，学到了不少知识',
        },
      ],
      tableDate:[
        {
          img:require('../assets/img/图层 12@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'275',
          collection:false,
          download:false
        },
        {
          img:require('../assets/img/图层 13@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'999',
          collection:true,
          download:true
        },
        {
          img:require('../assets/img/图层 14@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'66',
          collection:true,
          download:false
        }
      ],
      ruleForm:[],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
};
</script>

<style lang="less" scoped>
.flex-left {
  flex: 1;
  .breadcrumb {
    height: 80px;
    background: #ffffff;
    box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
    border-radius: 5px 5px 5px 5px;
    padding: 0 20px;
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #4e4e4e;
    }
  }
  .video {
    box-sizing: border-box;
    padding: 50px 100px 40px;
  }
  
}
.btn {
    font-size: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 4px 8px;
    margin-right: 10px;
  }
.flex-right {
  box-sizing: border-box;
  width: 380px;
  margin-left: 20px;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 2px;
  box-sizing: border-box;
  padding: 20px;
  .icon{
    width: 23px;
    height: 24px;
  }
  .tag{
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
    border: 1px solid #D8D8D8;
    display: inline-block;
    font-size:12px ;
  }
  .course{
    .cover{
      width: 40px;
      height: 40px;
    }
  }
  .comment{
    .head{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .datum{
    .cover{
      width: 150px;
      height: 100px;
      border-radius: 6px;
      overflow: hidden;
    }
    .read{
      position: absolute;
      width: 150px;
      height: 20px;
      line-height: 20px;
          box-shadow: inset 9px -12px 10px 0px rgba(0,0,0,.3);
      color: #fff;
      top: 80px;
      left: 0;
      padding: 0 5px;
      font-size: 12px;
      box-sizing: border-box;
      text-align: right;
      border-radius: 6px;
    }
  }
  
}
.submit{
  width: 60px;
  height: 36px;
  background: #CB3E3E;
  opacity: 0.5;
  border-radius: 4px;
  margin-left: 10px;
  color:#ffffff;
  outline: none;
  border: none;
}
.input{
  height: 37px;
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
}
.feedback_btn{
  width: 220px;
  height: 34px;
  background: #CB3E3E;
  opacity: 0.5;
  border-radius: 2px;
  border: none;
  outline: none;
  color: #ffffff;
}
</style>